<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        个人中心
        <small>积分明细</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">个人中心</a></li>
        <li class="active">积分清单</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
               <div class="box-body">
                     <div id="toolbar">
                          <form class="form-inline" id="searchForm">
                              <div class="form-group">
                              <label for="searchDate">积分日期</label>
                              <div class="input-group">
                                  <div class="input-group-addon">
                                      <i class="fa fa-calendar"></i>
                                  </div>
                                  <input type="text" class="form-control pull-right" id="searchDate" name="searchDate">
                              </div>
                          </div>
                              <div class="btn-group btn-group-sm">
                                  <button type="button" class="btn btn-default"
                                          onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                      <i class="glyphicon glyphicon-search"></i>
                                      查询
                                  </button>
                                  <button type="reset" class="btn btn-default">
                                      <i class="glyphicon glyphicon-trash"></i>
                                      清空
                                  </button>
                              </div>
                          </form>
                      </div>
                    </div>
               <!-- <p id="user" th:text="${user}">Some text here...</p>-->
                <table id="table"></table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
</section>


<script th:inline="javascript">
    var $table = $('#table');

    $(function () {
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/rank/rankdetail',
            cache: false,        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            showExport: true,                     //是否显示导出
            exportDataType: "all",              //basic', 'all', 'selected'.
            exportTypes: ['excel', 'xlsx'],
            exportOptions: {
                ignoreColumn: [0,]
            },
            queryParams :queryParams,
            idField: 'id',
            columns: [
                {field: 'state', checkbox: true},
                {field: 'cdate', title: '日期', sortable: true, halign: 'left'},
                {field: 'username', title: '员工', sortable: true, halign: 'left'},
                {field: 'inOut', title: '奖励/兑换', sortable: true, halign: 'left',formatter: 'inOutStatus',},
                {field: 'core', title: '积分', sortable: true, halign: 'left'},
                {field: 'itemName', title: '项目名称', sortable: true, halign: 'left'},
                {field: 'itemDesc', title: '说明', sortable: true, halign: 'left'},
            ]
        });
         //搜索的日期范围
        $('#searchDate').daterangepicker({
           // startDate: moment().subtract(29, 'days'),
           // endDate  : moment()
        });
        $('#searchDate').val('');
    });

    function inOutStatus(value, row, index) {
        var html = "";
        switch (value) {
            case -1:
                html = '<span style="color:#FF0000">' + '兑换' + '</span>';
                break;
            case 1:
                html = '<span style="color:#00FF00">' + '奖励' + '</span>';
                break;
        }
        return html;
    }

    function queryParams(params) {
        var temp = {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            // limit: params.limit,   //页面大小
            /*offset: params.offset,  //页码
            pageSize:this.pageSize,
            pageNumber:this.pageNumber,*/
            name: $("#nickName").val()
        };
        return temp;
    };
</script>

</html>